<!--  -->
<template>
<div class="about">
    <h1>关于我们</h1>
    <div class="content">
        <p class="write">
            <input v-model="input" placeholder="请填写关于我们">
        </p>
        <div class="detail">
            <p class="title">内容详情：</p>
            <div class="edit">
                <div class="top">
                    <div class="icon">
                        <img src="../assets/ed1.png" alt="">
                    </div>
                    <div class="icon icon2">
                        <img src="../assets/ed2.png" alt="">
                    </div>
                    <div class="icon icon3">
                        <img src="../assets/ed3.png" alt="">
                    </div>
                    <div class="icon icon4">
                        <img src="../assets/ed4.png" alt="">
                    </div>
                    <div class="icon icon5">
                        <img src="../assets/ed5.png" alt="">
                    </div>
                    <div class="icon icon6">
                        <img src="../assets/ed6.png" alt="">
                    </div>
                    <div class="icon icon7">
                        <img src="../assets/ed7.png" alt="">
                    </div>
                    <div class="icon icon8">
                        <img src="../assets/ed8.png" alt="">
                    </div>
                    <div class="icon icon9">
                        <img src="../assets/ed9.png" alt="">
                    </div>
                    <div class="icon icon10">
                        <img src="../assets/ed10.png" alt="">
                    </div>
                    <div class="icon icon11">
                        <img src="../assets/ed11.png" alt="">
                    </div>
                    <div class="icon icon12">
                        <img src="../assets/ed12.png" alt="">
                    </div>
                    <div class="icon icon13">
                        <img src="../assets/ed13.png" alt="">
                    </div>
                    <div class="icon icon14">
                        <img src="../assets/ed14.png" alt="">
                    </div>
                </div>
                <div class="bottom">
                    <p class="us">关于我们</p>
                    <div class="pic">
                        <img src="../assets/about.png" alt="">
                    </div>

                    <div class="my-textarea">
                        <textarea ref="textarea" :style="{'height': minHeight}" v-model="value1" class="textarea" ></textarea>
                    </div>

                    <div class="text">
                        <p>Tel:0531-59696636</p>
                        <p>WeChat:feixiang0006963</p>
                        <p>Address:北京市朝阳区京顺路111号</p>
                        <p style="margin-bottom: 30px;">世界购物中心</p>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="btn-save" :plain="true"  @click="open()">
              <img src="../assets/save1.png" alt="">
              <p>保存</p>
        </div>
    </div>    
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import calcTextareaHeight from '@/assets/calcTextareaHeight';
export default {
//import引入的组件需要注入到对象中才能使用
    components: {},
    name: 'my-textarea',
    data() {
    //这里存放数据
        return {
            // textarea内容
            value1: '校区环境优雅，简约舒适，电教化一体式互动教学，师生融洽，学习气氛浓郁。校区以高度本地化教育为导向，争取做方圆三公里受孩子喜爱、被家长信任的教育培训机构。让孩子真正的做到爱上学习，收获成长。6个精品小班教学中心，19个VIP个性化学习中心。非翔教育一步一步走进北京家庭，读懂孩子们的期望。请联系我们',
            // 动态高度
            minHeight: '110px',
            input: ''
        };
    },
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {
       value1() {
         this.getHeight();
       }
     },
//方法集合
methods: {
    open() {
        this.$message({
          message: '保存成功',
          type: 'success',
          center: true
        });
    },
    getHeight() {
        this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
    .about {
        width: 1100px;
        height: 760px;
        margin: 0 auto;
    }
    h1 {
    width: 97px;
    height: 70px;
    line-height: 70px;
    font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #9137F3;
    text-align: left;
    }
    .content {
        min-height: 690px;
        border: 1px solid rgba(228, 228, 228, 1);
    }
    .content .write {
        width: 1041px;
        height: 50px;
        font-size: 14px;
        line-height: 50px;
        color: #999;
        margin: 0 auto;
        border-bottom: 1px solid rgba(228, 228, 228, 1);
    }
    input {
        border: none!important;
        width: 1041px;
        height: 50px;
        border-bottom: 1px solid rgba(228, 228, 228, 1)!important;
    }
    input:focus {
        outline: none;
    }
    .detail {
        margin: 34px 0 0 0;
        min-height: 458px;
    }
    .detail .title {
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #333333;
        text-align: left;
        margin-left: 100px;
        float: left;
    }
    .detail .edit {
        float: left;
        width: 805px;
        height: 458px;
        border: 1px solid rgba(228, 228, 228, 1);
        border-radius: 8px;
        margin-left: 10px;
        overflow: hidden;
    }
    .detail .top {
        height: 50px;
        background: #f2f2f244;
    }
    .top .icon {
        width: 14px;
        height: 14px;
        line-height: 50px;
        margin-left: 22px;
        float: left;
    }
    .top .icon img {
        width: 100%;
        height: 100%;
    }
    .top .icon2 {
        width: 20px;
        height: 20px;
        line-height: 52px;
        margin-left: 22px;
    }
    .top .icon4 {
        width: 17px;
        height: 17px;
        line-height: 50px;
        margin-left: 22px;
    }
    .top .icon5 {
        width: 16px;
        height: 16px;
        line-height: 50px;
        margin-left: 22px;
    }
    .top .icon6 {
        width: 20px;
        height: 20px;
        line-height: 54px;
        margin-left: 22px;
    }
    .top .icon7 {
        width: 16px;
        height: 16px;
        line-height: 50px;
        margin-left: 22px;
    }
    .top .icon9 {
        width: 20px;
        height: 20px;
        line-height: 56px;
        margin-left: 22px;
    }
    .top .icon10 {
        width: 20px;
        height: 20px;
        line-height: 56px;
        margin-left: 22px;
    }
    .top .icon11 {
        width: 16px;
        height: 14px;
        line-height: 50px;
        margin-left: 22px;
    }
    .top .icon12 {
        width: 18px;
        height: 18px;
        line-height: 54px;
        margin-left: 22px;
    }
    .top .icon13 ,.top .icon14{
        width: 16px;
        height: 16px;
        line-height: 50px;
        margin-left: 22px;
    }
    .bottom {
        height: 408px;
        overflow-y:scroll; 
    }
    .us {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        color: #2561EF;
        text-align: center;
    }        
    .pic {
        width: 300px;
        height: 158px;
        margin: 0 auto;
    }  
    .pic img {
        width: 100%;
        height: 100%;
    }  
    .text {
        width: 760px;
        margin: 45px auto 0;
    }
    .text p {
        color: #333;
        font-size: 14px;
        line-height: 26px;
        text-align: center;
    }
    .my-textarea {
        text-align: center;
        margin-top: 25px;
        border: none;
    }
    .my-textarea .textarea {
        display: inline-block;
        width: 760px;
        /*height: 30px;*/
        font-family: '思源黑体';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 26px;
        color: #333333;
        /* resize: none; */
    }
    textarea {
        border: none;
    }
    textarea:focus {
        outline: none;
    }
    .btn-save {
        width: 98px;
        height: 36px;
        line-height: 36px;
        background: inherit;
        background-color: rgba(145, 55, 243, 1);
        border: none;
        border-radius: 6px;
        color: #fff;
        text-align: center;
        margin: 76px auto;
    }
    .btn-save img {
    float: left;
    width: 16px;
    height: 16px;
    margin-top: 10px;
    margin-left: 24px;
    }
    .btn-save p {
    float: left;
    margin-left: 8px;
    font-size: 14px;
    }
</style>